
<!--



表格模板

将自己所需要显示的表格页面的路径，填入对应导航栏选项的index值中

-->


<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
    <script type="text/javascript" src="static/js/axios.min.js"></script>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }




    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;


    }
</style>

<body>
<div id="app">
    <template>
    <el-row class="demo-autocomplete">
        <el-col :span="6">
            渠道:
            <el-input v-model="input1" style="width:150px"  placeholder="请输入渠道"></el-input>
        </el-col>
        <el-col :span="2">选择日期</el-col>
        <el-col :span="6">
            <el-date-picker
                    v-model="value1"
                    type="date"
                    value-format="yyyy-MM-dd"
                    placeholder="选择日期">
            </el-date-picker>
            <el-col :span="6">
                <!--   空栏防止输入框往有边跑-->
            </el-col>
        </el-col>

        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="small" @click="getData">查询</el-button>

        </el-col>
    </el-row>
        </template>
    <!--table 模板 ：data 绑定了数据 tableData-->
    <br>
    <template>
        <el-table

                :data="tableData"
                 style="width: 100%"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column
                    :formatter="dataFormat"
                    fixed
                    prop="lendingDate"
                    label="放款日期"
                    width="100">
            </el-table-column>
            <el-table-column
                    label="放款统计"
                    width="280"
            >
            <el-table-column
                    prop="loanOrderNums"
                    label="订单笔数"
                    width="100">

            </el-table-column>
            <el-table-column
                    prop="loanOrderAmount"
                    label="订单金额"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="loanAmount"
                    label="实际放款金额"
                    width="80">
            </el-table-column>
            </el-table-column>
            <el-table-column
                    label="回款统计"
                    width="560"
            >
            <el-table-column
                    prop="returnOrderNums"
                    label="回款订单笔数"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="returnBillNums"
                    label="回款帐单笔数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="returnAmount"
                    label="回款总金额"
                    width="80">
            </el-table-column>

            <el-table-column
                    prop="returnPrincipal"
                    label="回款本金"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="returnInterest"
                    label="回款利息"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="returnPenalty"
                    label="回款违约金"
                    width="100">
            </el-table-column>
            </el-table-column>
            <el-table-column label="待收统计"
            width="900"
            >
            <el-table-column
                    prop="waitOrderNums"
                    label="待收订单笔数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="waitBillNums"
                    label="待收帐单笔数"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="waitAmount"
                    label="待收总金额"
                    width="100">
            </el-table-column>
            <el-table-column
                    prop="waitPrincipal"
                    label="待收本金"
                    width="100">
            </el-table-column>
                <el-table-column
                        prop="waitInterest"
                        label="待收利息"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="waitPenalty"
                        label="待收罚息"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="waitService"
                        label="待收手续费"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="overdueOrderNums"
                        label="逾期订单笔数"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="overduePrincipal"
                        label="逾期订单待收本金"
                        width="100">
                </el-table-column>
            </el-table-column>
        </el-table>
        <!--Element分頁插件 有待改进-->
        <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="10"
                layout="total, prev, pager, next, jumper"
                :total="totalCount">
        </el-pagination>
    </template>
</div>
</body>


<script type="text/javascript" th:inline="javascript">




    let demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                restaurants: [],
                input1: '',
                value1: '',
                dialogFormVisible: false,  //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                // 总数据
                tableData:[],
                // 默认显示第几页
                currentPage:1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount:1,
                // 个数选择器（可修改）
                pageSizes:[1,2,3,4],
                // 默认每页显示的条数（可修改）
                PageSize:1,
            }
        },
        methods: {
            //时间格式转换
            dataFormat: function(row,column) {
                //获取表格数据
                let data = row[column.property]
                if (data === null) {
                    return ''
                }
                let dt = new Date(data)
                return dt.getFullYear() + '-' + (dt.getMonth() + 1) + '-' + dt.getDate()
            },

            getData(){
                // 这里使用axios，使用时请提前引入
                axios.get("fin/page",{
                    params:{
                        limit:10,
                        pageNum:this.currentPage,
                        lendingDate:this.value1,
                        channel:this.input1

                    }

                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{
                    console.log(reponse)
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows
                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total
                })
            },
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                this.getData()
            },

        },
        created:function(){
            this.getData()

        }

    })

</script>
</html>